<template>
  <tiny-date-picker v-model="value"
                    :picker-options="pickerOptions"
                    :size="size"
                    :style="{width: width ? (width+'px') : '155px'}"
                    :readonly="readonly"
                    :disabled="disabled"
                    :clearable ="clearable"
                    :placeholder="placeholder"
                    :type="type"
                    @change="change"
  />
</template>
<script >
import { DatePicker } from '@opentiny/vue'
import tool from "@/utils/tool";

export default {
  components: {
    TinyDatePicker: DatePicker
  },
  props: {
    modelValue: {  type: [Date, String, Array], default: '' },
    placeholder: {  type: String, default: '选择日期' },
    width: {  type: Number, default: 0 },
    height: {  type: [Number, String], default: '' },
    size: {  type: String, default: 'small' }, // medium small default mini
    type: {  type: String, default: 'date' },
    readonly: {type: Boolean, default: false},
    disabled: {type: Boolean, default: false},
    clearable: {type: Boolean, default: false},
  },
  data() {
    return {
      value: this.modelValue,
      dateRangeValue: '',
      monthRangeValue: '',
      startFromValue: '',
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              const date = new Date()
              picker.$emit('pick', date)
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '前天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 48)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一月前',
            value: () => {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', date)
            }
          },
          {
            text: '三月前',
            value: () => {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', date)
            }
          },
          {
            text: '半年前',
            value: () => {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 180)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一年前',
            value: () => {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 360)
              picker.$emit('pick', date)
            }
          },
        ]
      },
      pickerOptionsDateRange: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      pickerOptionsMonthRange: {
        shortcuts: [
          {
            text: '本月',
            onClick(picker) {
              const date = new Date()
              const tmp = new Date(date.getFullYear(), date.getMonth() + 1, 1, 0, 0, 0)
              const start = new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0)
              const end = new Date(tmp.getTime() - 1)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '今年至今',
            onClick(picker) {
              const date = new Date()
              const start = new Date(date.getFullYear(), 0)
              const end = new Date()
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近六个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setMonth(start.getMonth() - 6)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      pickerOptionsStartFrom: {
        shortcuts: [
          {
            text: '某日起始', // text可以自定义
            type: 'startFrom'
          },
          {
            text: '某日为止', // text可以自定义
            type: 'endAt'
          },
          {
            text: '自定义结束日期',
            type: 'startFrom',
            endDate: new Date('2030-10-10') // 传入的日期必须为一个日期对象
          },
          {
            text: '自定义开始日期',
            type: 'endAt',
            startDate: new Date('2000-10-10') // 传入的日期必须为一个日期对象
          }
        ]
      }
    }
  },
  emits: ['update:modelValue'],
  methods: {
    change (val) {
      if(this.type === 'daterange') {
        if(val) {
          let b = tool.getDay(val[0])
          let e = tool.getDay(val[1])
          this.$emit('update:modelValue', [b, e])
        }
        else {
          this.$emit('update:modelValue', [])
        }
      }
      else {
        if(val) {
          this.$emit('update:modelValue', tool.dateFormat(val))
        }
        else {
          this.$emit('update:modelValue', null)
        }
      }
    }
  },
  watch: {
    modelValue (val) {
      this.value = val
    }
  }
}
</script>
<style scoped lang="scss">

</style>